<template>
  <div class="content2">
    <div class="Title">
      <p>通知公告</p>
    </div>
    <div class="text">
      <el-table :data="title" @row-click="article">
        <el-table-column prop="title">
          <template slot-scope="scope">
            <i class="arrow el-icon-arrow-right"></i>
            {{ scope.row.title }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button
      type="primary"
      @click="gonotice"
      style="background-color: #084fb0; border-color: #084fb0"
      >查看更多
    </el-button>
  </div>
</template>
<script>
import { contentnotices } from "@/api";
export default {
  name: "ContentNotice",
  data() {
    return {
      title: [],
    };
  },
  created() {
    // 调用API传递参数
    contentnotices().then((res) => {
      const data = res.data;
      this.title = data.slice(0, 5);
    });
  },
  methods: {
    gonotice() {
      // 向APP传值
      this.$emit("notice", false);
      // 路由跳转路径和query传值
      this.$router.push({
        path: "/more-text",
        query: { key: "通知公告", more: 2, article: 0, apinum: 1 },
      });
    },
    article(row, event, column) {
      this.$router.push({
        path: "/more-text",
        query: { key: "通知公告", more: 2, article: 2, id: row.id },
      });
    },
  },
};
</script>
<style>
/* 通知公告 */
.content2 {
  padding: 0.12rem;
  background: white;
  margin-bottom: 0.32rem;
}
/* 表格单行 */
.content2 .text .el-table .cell {
  line-height: 0.68rem !important;
  height: 0.68rem;
  width: 88%;
  margin-left: 0.6rem;
  font-size: 0.56rem;
  white-space: nowrap;
}
/* 箭头 */
.arrow {
  font-size: 0.8rem;
  color: #868686;
  position: absolute;
  left: 93%;
}
</style>
